<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遥感分析 - 苗情灾情监测系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/remote-sensing.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- 引入地图相关库 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <!-- 引入图表库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <main class="remote-sensing-container main-container">
        <!-- 左侧控制面板 -->
        <div class="control-panel">
            <!-- 时间选择 -->
            <div class="panel-section">
                <h3>时间范围</h3>
                <div class="date-range">
                    <input type="date" id="startDate">
                    <span>至</span>
                    <input type="date" id="endDate">
                </div>
            </div>

            <!-- 分析类型选择 -->
            <div class="panel-section">
                <h3>分析类型</h3>
                <div class="analysis-types">
                    <button class="analysis-btn active" data-type="growth">
                        <i class="fas fa-seedling"></i>
                        <span>长势分析</span>
                    </button>
                    <button class="analysis-btn" data-type="yield">
                        <i class="fas fa-chart-line"></i>
                        <span>产量预估</span>
                    </button>
                    <button class="analysis-btn" data-type="drought">
                        <i class="fas fa-tint-slash"></i>
                        <span>干旱指数</span>
                    </button>
                    <button class="analysis-btn" data-type="maturity">
                        <i class="fas fa-clock"></i>
                        <span>成熟度分析</span>
                    </button>
                </div>
            </div>

            <!-- 数据筛选 -->
            <div class="panel-section">
                <h3>数据筛选</h3>
                <div class="filter-options">
                    <div class="filter-item">
                        <label>监测区域</label>
                        <select id="areaSelect">
                            <option value="all">全部区域</option>
                            <option value="area1">A区水稻田</option>
                            <option value="area2">B区玉米地</option>
                            <option value="area3">C区小麦地</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>数据来源</label>
                        <select id="dataSource">
                            <option value="sentinel">Sentinel-2</option>
                            <option value="landsat">Landsat 8</option>
                            <option value="modis">MODIS</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间主要内容区域 -->
        <div class="main-content">
            <!-- 遥感地图 -->
            <div class="map-container">
                <div class="map-header">
                    <h3>遥感影像</h3>
                    <div class="map-tools">
                        <button class="tool-btn" title="图层控制">
                            <i class="fas fa-layer-group"></i>
                        </button>
                        <button class="tool-btn" title="测量工具">
                            <i class="fas fa-ruler"></i>
                        </button>
                        <button class="tool-btn" title="导出">
                            <i class="fas fa-download"></i>
                        </button>
                    </div>
                </div>
                <div id="analysisMap"></div>
            </div>

            <!-- 分析结果区域 -->
            <div class="analysis-container">
                <div class="analysis-header">
                    <h3>分析结果</h3>
                    <button class="btn-export">
                        <i class="fas fa-file-export"></i> 导出报告
                    </button>
                </div>
                <div id="analysisContent" class="analysis-content">
                    <!-- 分析结果将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>

        <!-- 右侧详情面板 -->
        <div class="detail-panel">
            <div class="panel-section">
                <h3>地块详情</h3>
                <div id="plotDetails" class="plot-details">
                    <!-- 地块详情将通过JavaScript动态加载 -->
                </div>
            </div>
           
        </div>
    </main>

    <script src="js/components/navbar.js"></script>
    <script src="js/remote-sensing.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            Navbar.init();
        });
    </script>
</body>
</html> 